<template>
  <div class="group-item">
    <label class="checkbox-label">
      <input
        type="checkbox"
        class="pick-checkbox"
        :checked="checked"
        :disabled="disabled && checked"
        @click="clickHandler"
      />
      <template v-if="data.avatar">
        <img class="pick-zuzhi-box" :src="data.avatar" alt="" />
      </template>
      <template v-else>
        <div class="pick-zuzhi-box">
          <svg class="pick-icon pick-zuzhi" aria-hidden="true">
            <use xlink:href="#icon-a-huiyi_icon_zuzhi_1x"></use>
          </svg>
        </div>
      </template>
      <span class="category-info">
        <template v-if="fn">
          <span class="category-name" v-html="categoryName"></span>
        </template>
        <template v-else>
          <span class="category-name">{{ data.categoryName }}</span>
        </template>

        <span v-if="type !== 'group' && data?.numberPeople" class="number-people"
          >({{ data.numberPeople }}人)</span
        >
      </span>
    </label>
    <div
      class="subordinate"
      :class="{
        'pick-theme-color': !checked && isopen
      }"
      @click="!checked && isopen && inLowerHandler()"
    >
      <span class="verticalLine"></span> <span>下级</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GroupItem'
};
</script>
<script setup>
import PinyinMatch from 'pinyin-match';
import { computed, defineProps, inject } from 'vue';
const props = defineProps({
  data: {
    type: Object
  },
  fn: {
    type: [Function, Boolean],
    default: false
  }
});
// 选中列表
const selectList = inject('selectList');
// 搜索字段 用于高亮显示
const searchCriteria = inject('searchCriteria');
// 固定数据
const fixData = inject('fixData');
// 选择类型
const type = inject('type');
// 点击进入下级更改显示数据
const updateShowListData = inject('updateShowListData');
// 添加或者删除分组
const addOrDelSelectHandler = inject('addOrDelSelectHandler');
// 点击多选框
const clickHandler = e => {
  let bool = e.target.checked;
  addOrDelSelectHandler(bool, [props.data], 'categoryId');
  e.target.checked = checked.value;
  e.target.blur();
};
// 点击进入下级 fn存在时：在搜索弹窗中点击下级调用对应方法 fn不存在时：正常进入下级
const inLowerHandler = () => {
  if (props.fn) {
    props.fn(props.data);
  } else {
    updateShowListData(props.data, '面包屑导航');
  }
};
// 是否选中
const checked = computed(() => selectList.value.some(t => t.categoryId === props.data.categoryId));
// 是否进入下级
const isopen = computed(() => {
  if (type.value === 'group') {
    return props.data?.childList?.length > 0;
  } else {
    return props.data?.childList?.length > 0 || props.data?.listPeople?.length > 0;
  }
});
// 是否禁用
const disabled = computed(() => {
  if (fixData.value && fixData.value?.length > 0) {
    return fixData.value.some(t => t.categoryId === props.data.categoryId);
  } else {
    return false;
  }
});
// 模糊搜索高亮
const categoryName = computed(() => {
  let index = PinyinMatch.match(props.data.categoryName, searchCriteria.value);
  let v = props.data.categoryName.slice(index[0], index[1] + 1);
  let reg = new RegExp(v);
  let innerHTML = props.data.categoryName.replace(
    reg,
    `<span style="color:var(--tj-primary-color) !important;">${v}</span>`
  );
  return innerHTML;
});
</script>

<style lang="less" scoped>
.category-info {
  display: flex;
  align-items: center;
  .category-name {
    display: inline-block;
    white-space: nowrap;
    max-width: 146px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .number-people {
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: left;
    color: #cfd3d6;
    font-size: 12px;
  }
}

.pick-zuzhi {
  width: 24px;
  height: 25px;
  color: var(--tj-primary-color) !important;
}
.group-item {
  // width: 345px;
  width: 100%;
  height: 48px;
  margin: 4px 0;
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding-right: 8px;
  &:hover {
    background: #f5f6f7;
  }
  .subordinate {
    cursor: pointer;
    width: 50px;
    line-height: 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    color: #cfd3d6;
    .verticalLine {
      margin-top: 1px;
      display: inline-block;
      height: 12px !important;
      border: 1px solid rgba(186, 191, 197, 0.4);
      margin-right: 12px;
    }
  }
  .pick-zuzhi-box {
    width: 32px;
    height: 32px;
    background-color: var(--tj-primary-color-1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
  }
}
</style>
